<template>
  <div class="page-container">
    <!--表格内容栏-->
    <cm-table
      ref="dataTable"
      pkName="id"
      :filters="filters"
      :filterFields="filterFields"
      :columns="columns"
      :defaultSort="defaultSort"
      @handleTableOperator="handleTableOperator"
      @handleCellOperator="handleCellOperator"
    >
    </cm-table>
    <!--新增/编辑/查看界面-->
    <div class="edit-dialog">
      <el-dialog
        :title="dialogTitle"
        width="65%"
        v-model="dialogVisible"
        :close-on-click-modal="false"
        destroy-on-close
        draggable
      >
        <el-form
          :model="formData"
          label-width="120px"
          :disabled="!dialogEdit"
          :rules="rules"
          :hide-required-asterisk="!dialogEdit"
          ref="dataForm"
          label-position="right"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="Bean名称" prop="beanName">
                <el-input v-model="formData.beanName" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="方法名" prop="methodName">
                <el-input v-model="formData.methodName" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="参数" prop="params">
                <el-input v-model="formData.params" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="cron表达式" prop="cronExpression">
                <el-input v-model="formData.cronExpression" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <cm-radio v-model="formData.status" dicCode="dicScheduleStatus"></cm-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="formData.remark" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!dialogEdit">
            <el-col :span="12">
              <el-form-item label="创建时间" prop="createTime">
                <el-input v-model="formData.createTime" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <el-button 
            v-if="dialogEdit"
            size="large"
            type="info" 
            @click="dialogVisible=false"
          >取消</el-button>
          <el-button 
            v-if="dialogEdit"
            size="large"
            type="primary"
            @click="submitForm"
            :loading="editLoading"
          >提交</el-button>
          <el-button 
            v-if="!dialogEdit"
            size="large"
            type="info"
            @click="dialogVisible=false"
          >关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {ref, nextTick} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import api from '@/http/api'

const filters = ref({
  beanName: '',
  methodName: ''
}) // 分页查询条件
const filterFields = ref([
  {prop: "beanName", label: "bean名"},
  {prop: "methodName", label: "方法名"},
])
const columns = ref([
  {prop: "beanName", label: "Bean名", minWidth: 120},
  {prop: "methodName", label: "方法名", minWidth: 120},
  {prop: "params", label: "参数", minWidth: 120},
  {prop: "cronExpression", label: "cron表达式", minWidth: 120},
  {prop: "status", label: "状态", minWidth: 80, type: 'select', dicCode: 'dicScheduleStatus'},
  {prop: "remark", label: "备注", minWidth: 120},
  {prop: "createTime", label: "创建时间", minWidth: 120}
]) // 分页列表字段
const defaultSort = ref({prop: 'status', order: 'ascending'}) // 分页排序

const dialogTitle = ref('') // 新增/编辑/查看弹窗标题
const dialogVisible = ref(false) // 弹窗是否显示
const dialogEdit = ref(true) // 弹窗表单是否可编辑
const editLoading = ref(false) // 弹窗表单提交状态
const rules = ref({
  beanName: [{required: true, message: '请输入Bean名', trigger: 'blur'}],
  methodName: [{required: true, message: '请输入方法名', trigger: 'blur'}],
  cronExpression: [{required: true, message: '请输入cron表达式', trigger: 'blur'}],
  status: [{required: true, message: '请输入状态', trigger: 'change'}]
}) // 弹窗表单数据验证规则
const formData = ref({}) // 弹窗表单数据
const dataTable = ref({}) // 弹窗表单数据
const dataForm = ref()

const handleCellOperator = (property, value, row) => {
  formData.value = Object.assign({}, row);
  dialogVisible.value = true;
  dialogEdit.value = false;
  dialogTitle.value = "查看";

  nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
}

// 显示操作界面
const handleTableOperator = (button, row) => {
  dialogVisible.value = true;
  dialogEdit.value = true;
  dialogTitle.value = button.name;
  if (button.buttonType === 'edit') {
    formData.value = Object.assign({}, row, {button: button});
  } else {
    formData.value = {button: button};
  }

  nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
}

// 表单提交
const submitForm = () => {
  dataForm.value && dataForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('请确认是否提交？', '提示', {type: 'info'}).then(() => {
        editLoading.value = true;
        api.post(formData.value.button.dataDestUrl, formData.value).then(res => {
          ElMessage.success(res.message);
          dialogVisible.value = false;
          dataTable.value.findPage();
          editLoading.value = false;
        }).catch(() => {
          editLoading.value = false;
        })
      }).catch(()=>{});
    } else {
      ElMessage.error('数据录入不正确，请重新检查！');
    }
  })
}
</script>

<style scoped>
</style>